<script lang="ts" setup>
import { i18n } from "@/locales";
import { EditorContent, VueEditor } from "@/tiptap";
import { computed, watch, type CSSProperties, type PropType } from "vue";
import EditorBubbleMenu from "./EditorBubbleMenu.vue";
import EditorHeader from "./EditorHeader.vue";

const props = defineProps({
  editor: {
    type: Object as PropType<VueEditor>,
    required: true,
  },
  contentStyles: {
    type: Object as PropType<CSSProperties>,
    required: false,
    default: () => ({}),
  },
  locale: {
    type: String as PropType<"zh-CN" | "en" | "zh" | "en-US">,
    required: false,
    default: "zh-CN",
  },
});

watch(
  () => props.locale,
  () => {
    i18n.global.locale.value = props.locale;
  },
  {
    immediate: true,
  }
);

// Watch for sidebar toggle state changes
const showSidebar = computed(() => {
  return (props.editor?.storage as any)?.sidebarToggle?.showSidebar ?? false;
});
</script>
<template>
  <div v-if="editor" class="halo-rich-text-editor">
    <editor-bubble-menu :editor="editor" />
    <editor-header :editor="editor" />
    <div class="editor-main-container">
      <div class="editor-content-wrapper">
        <div v-if="$slots.content" class="editor-header-extra">
          <slot name="content" />
        </div>

        <editor-content
          :editor="editor"
          :style="contentStyles"
          class="editor-content markdown-body"
        />
      </div>
      <div v-if="$slots.extra && showSidebar" class="editor-sidebar">
        <slot name="extra"></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.halo-rich-text-editor {
  .editor-main-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .editor-content-wrapper {
    position: relative;
    flex: 1;
    overflow-y: auto;
    background-color: var(--editor-background-color);
    display: flex;
    flex-direction: column;
    min-height: 0; /* 确保 flex 子元素可以正确收缩 */
  }

  .editor-content {
    position: relative;
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* 确保 flex 子元素可以正确收缩 */
  }

  .editor-sidebar {
    height: 100%;
    width: 18rem; // 72 * 0.25rem = 18rem
    flex: none;
    flex-shrink: 0;
    overflow: hidden; /* 侧边栏本身不滚动，由内部 .sidebar-toc 控制滚动 */
    display: flex; /* 支持内部 flex 布局 */
    flex-direction: column; /* 垂直布局 */
    min-height: 0; /* 确保侧边栏可以正确收缩 */
  }
}
</style>
